<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#/home">首页</a>
    <a href="#/about">about页</a>
    <div id="app">
        <div>我是首页的内容</div>
    </div>
</body>
<script>
 let arr = [{path:'#/home',component:'<div>我是首页的内容</div>'},{path:'#/about',component:'<div>我是about页面的内容</div>'}]

//  获取节点  app
let dom = document.querySelector('#app')
// console.log(typeof dom);   获取到的是dom对象
// onhashchange   监听 hash值的变化 location.hash
console.log(window);
window.onhashchange = function(){
    console.log('触发');
    console.log(location);//location.hash 获取哈希值   location.href 获取 url路径
    let bool = arr.find(item=>item.path == location.hash)
    dom.innerHTML = bool.component
}


</script>
</html>